<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery方法</title>
    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:15px;
            border:#000 1px solid;
            font-size:17px;
            float:left;
        }
        div.bgRed {
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
        }
        .cla1{
            background-color:#aaaaaa;
        }
        .cla2{
            color:red;
        }
        ul{
            padding:20px;
            background-color:#aaaaaa;
            width:200px;
        }
        li{
            background-color:#3399dd;
            margin:10px;
            width:180px;
        }
        hr{
            clear:both
        }
    </style>
    <script
            src="http://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
            crossorigin="anonymous">
        // 最新版的jquery 3.5.1
    </script>
    <script>
        $(function () {
           nodeMethod();
        });
        function nodeMethod() {
            // TODO 文档操作相关操作
            let $ul = $("ul:first");
            // 获取ul
            $ul.after("<li>after的li</li>");
            // 在ul外面的后面插入
            $ul.before("<li>before的li</li>");
            // 在ul外面的前面插入
            $ul.append("<li>append的li</li>");
            // 在ul内部的后面插入
            $ul.prepend("<li>prepend的li</li>");
            // 在ul外面插入前面插入

            // 删除 empty();

            // $ul.empty();
            // $ul.html(" ");
            // $ul.remove();
            // $("ul li").remove(":contains('1')");
            // 删除文本内容包含1的li


            // 创建标签
            let $hr = $("<hr/>");
            // 创建一个hr标签
            $ul.append($hr);
            // 把hr添加到ul之后

        }
    </script>
</head>
<body>
<div  id="div_1">div_11<font>font1</font></div>
<div  id="div_2">div_12<font>font2</font></div>
<div  id="div_3" class="cla1">div_13</div>
<div  id="div_4">div_14</div>
<input   type="text"  id="input_1" style="clear:both;"/><br/>
<hr/>

<ul>
    <li>li标签1</li>
    <li>li标签1</li>
    <li>li标签1</li>
</ul>
</body>
</html>`